<template>
  <div style="width: 50%; margin: 10px auto">
    <div style="margin-bottom: 20px" v-if="total > 0 || title">
      <el-input style="width: 300px" v-model="title" placeholder="请输入标题" clearable></el-input>
      <el-button type="primary" style="margin-left: 10px" @click="load(1)">查询</el-button>
      <el-button type="warning" style="margin-left: 10px" @click="reset">清空</el-button>
    </div>
    <div class="card" v-for="item in helpList" :key="item.id" style="display: flex; grid-gap: 10px;">
      <img :src="item.userAvatar" style="width: 50px; height: 50px; display: block; border-radius: 50%;" />
      <div style="flex: 1;">
        <div>
          <strong>{{ item.title }}</strong>
          <el-tag type="warning" v-if="item.solved === '未解决'" style="margin-left: 10px">未解决</el-tag>
          <el-tag type="success" v-if="item.solved === '已解决'" style="margin-left: 10px">已解决</el-tag>
        </div>
        <div style="margin-top: 10px">
          <span><i class="el-icon-user"></i>{{ item.userName }}</span>
          <span style="margin-left: 20px;"><i class="el-icon-time"></i>{{ item.time }}</span>
        </div>
        <div>
          <el-image :src="item.img" :preview-src-list="[item.img]" style="width: 160px; height: 80px;margin-top: 20px"></el-image>
        </div>
        <div v-html="item.content" style="margin: 15px 0"></div>
        <div style="margin-bottom: 20px">
          <el-button type="primary" size="mini" @click="handleCommentShow(item)">展开 / 折叠 求购评论</el-button>
        </div>
        <div v-if="item.showComment">
          <Comment :fid="item.id" module="help" />
        </div>
      </div>
    </div>
    <div class="pagination" v-if="total>pageSize">
      <el-pagination
          background
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[5, 10, 20]"
          :page-size="pageSize"
          layout="total, prev, pager, next"
          :total="total">
      </el-pagination>
    </div>
    <div v-if="total <= 0" style="margin-top: 30%">
      <el-empty description="暂无求购内容"></el-empty>
    </div>
  </div>
</template>

<script>
import Comment from "@/components/Comment.vue";
export default {
  name: "FrontHelp",
  data(){
    return {
      helpList: [],  // 所有的数据
      pageNum: 1,   // 当前的页码
      pageSize: 5,  // 每页显示的个数
      total: 0,
      title: ''
    }
  },
  created(){
    this.load(1)
  },
  components: {
    Comment
  },
  methods: {
    handleCommentShow(help){
      this.$set(help, 'showComment', !help.showComment);
    },
    load(pageNum) {  // 分页查询
      if (pageNum) this.pageNum = pageNum
      this.$request.get('/help/selectFrontPage', {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          title: this.title
        }
      }).then(res => {
        if (res.code === '200') {
          this.helpList = res.data?.list
          this.total = res.data?.total
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    handleCurrentChange(pageNum) {
      this.load(pageNum)
    },
    reset(){
      this.title='';
      this.load(1)
    }
  }
}
</script>

<style scoped>
.card {
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin: 20px 0;
  width: 100%;
  display: flex;  /* 使父容器成为弹性容器 */
  align-items: flex-start;  /* 垂直对齐到顶部 */
}

/* 使图片和文字部分在同一行内显示 */
.card > img {
  margin-bottom: 0;
}
</style>
